<template>
  <div class="test">
    123test
    {{ aname }}{{ foo2 }}
    <button @click="add">123</button>
    <button @click="open" ref="button">as</button>
    <input type="text" v-model="str" />{{ str }}
    {{ name12 }}
  </div>
</template>

<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Emit,
  Ref,
  Model,
  PropSync,
  Provide,
  ModelSync,
  Inject,
  VModel,
} from "vue-property-decorator";
@Component({}) // 必须要加 不管有没有组件
export default class Text extends Vue {
  public str: string = "12"; // 用于 双向绑定
  @VModel({ type: String }) //类似于计算属性
  name12!: string;
  @PropSync("name", { default: "default value" }) aname!: string;
  @Inject() foo2!: string;
  @Inject() foo3!: object;
  @Ref("button") readonly button!: HTMLButtonElement;
  @Emit()
  public open(e: MouseEvent) {
    console.log(this.button);
    return e;
  }
  mounted() {
    this.str = "123";
    this.name12 = "123";
    console.log("123", this.foo3);
  }
  public add() {
    console.log(123);
    this.$emit("update:name", "1212");
  }
}
</script>

<style>
.test {
  border: 1px solid red;
}
</style>